<template>
  <div class="container-echarts">
    <div class="box" ref="chart1"></div>
    <div class="box" ref="chart2"></div>
    <div class="box" ref="chart3"></div>
    <div class="box" ref="chart4"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {
    this.showEchartsOne()
    this.showEchartsTow()
    this.showEchartsThree()
   setTimeout(() => {
      this.showEchartsFour()
    }, 1000)
  },

  methods: {
    showEchartsOne() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.chart1)
      // 绘制图表
      myChart.setOption({
        title: {
          show: true,
          text: '2019年12月份销售额',
          left: 'center',
          top: '3%'
        },
        backgroundColor: '#fff',
        color: ['#23CF9C', '#578FFB', '#6E40F2', '#FF61E6', '#8B5CFF', '#00CA69'],
        legend: {
          top: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '20%',
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true,
          borderWidth: 1, // 设置边框宽度
          borderColor: '#000' // 设置边框颜色
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}月',
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9'
              }
            },
            data: ['1', '2', '3', '4', '5', '6', '7', '8']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：万',
            axisLabel: {
              textStyle: {
                color: '#666'
              }
            },
            nameTextStyle: {
              color: '#666',
              fontSize: 12,
              lineHeight: 40
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '工厂1',
            type: 'line',
            smooth: true,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#23CF9C30'
                    },
                    {
                      offset: 1,
                      color: '#23CF9C10'
                    }
                  ],
                  false
                ),
                shadowColor: '#23CF9C10',
                shadowBlur: 10
              }
            },
            data: [100, 138, 350, 173, 180, 150, 180, 230]
          },
          {
            name: '工厂2',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#578FFB30'
                    },
                    {
                      offset: 1,
                      color: '#578FFB10'
                    }
                  ],
                  false
                ),
                shadowColor: '#578FFB10',
                shadowBlur: 10
              }
            },
            data: [233, 233, 200, 180, 199, 233, 210, 180]
          },
          {
            name: '工厂3',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#6E40F230'
                    },
                    {
                      offset: 1,
                      color: '#6E40F210'
                    }
                  ],
                  false
                ),
                shadowColor: '#6E40F210',
                shadowBlur: 10
              }
            },
            data: [400, 300, 250, 140, 289, 13, 320, 180]
          },
          {
            name: '工厂4',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#FF61E630'
                    },
                    {
                      offset: 1,
                      color: '#FF61E610'
                    }
                  ],
                  false
                ),
                shadowColor: '#FF61E610',
                shadowBlur: 10
              }
            },
            data: [20, 525, 241, 321, 58, 122, 75, 243]
          }
        ]
      })
    },
    showEchartsTow() {
      var myChart = echarts.init(this.$refs.chart2)
      var chartData = [
        {
          name: '2012',
          value: 80
        },
        {
          name: '2013',
          value: 90
        },
        {
          name: '2014',
          value: 112
        },
        {
          name: '2015',
          value: 85
        },
        {
          name: '2016',
          value: 160
        },
        {
          name: '2017',
          value: 128
        },
        {
          name: '2018',
          value: 150
        }
      ]

      myChart.setOption({
        title: {
          text: '人数统计',
          left: 'center',
          top: '2%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            console.log(params)
            return +params[0].name + '年<br/>' + params[0].seriesName + ': ' + params[0].value + '人'
          }
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          name: '\n\n\n年',
          offset: 4.5,
          axisLabel: {
            show: true,
            //rotate: 30, //x轴文本倾斜角度
            textStyle: {
              color: '#666',
              fontSize: 16
            },
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(72, 81, 119, .5)'
            }
          },
          axisTick: {
            show: false //坐标轴小标记
          },
          data: (function (data) {
            var arr = []
            data.forEach(function (items) {
              arr.push(items.name)
            })
            return arr
          })(chartData) //载入横坐标数据
        },
        yAxis: {
          type: 'value',
          // name: '人数\xa0\xa0\xa0\xa0\xa0\xa0', // \xa0 表示空格
          nameTextStyle: {
            color: '#666',
            fontFamily: 'Simsun',
            fontSize: 16
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
              fontSize: 15
            },
            margin: 10,
            formatter: '{value}'
          },
          axisLine: {
            //y轴线
            lineStyle: {
              color: 'rgba(72, 81, 119, .4)',
              width: 1
            }
          },
          axisTick: {
            show: false //坐标轴小标记
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(72, 81, 119, .2)', //横向网格线颜色
              width: 1,
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '统计人数',
            type: 'pictorialBar', //象形柱图
            barCategoryGap: '0%',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#666',
                  fontSize: 15
                }
              }
            },
            //symbol图形类型, 'image://url', 'image://data:image/gif;base64, dataURI', 'path://'
            //symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            //symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            //symbol: 'path://M533,1923s28.173-25.55,47-116.03c12.244-58.84,30.312-47.59,42-3.55,23.118,87.12,32.66,107.68,57,119.58H533Z',
            symbol:
              'path://M63.000,299.000 L109.000,299.000 C109.000,299.000 93.667,190.333 98.000,175.000 C102.333,159.667 171.000,98.000 171.000,98.000 L95.000,146.000 C95.000,146.000 84.333,8.667 81.000,-0.000 L72.000,181.000 L-0.000,117.000 C-0.000,117.000 63.667,191.667 69.000,203.000 C74.333,214.333 63.667,288.666 63.000,299.000 Z',
            itemStyle: {
              normal: {
                opacity: 0.8,
                color: function (params) {
                  // 颜色定制显示（按顺序）
                  var colorList = ['#8a9ef3', '#80f1b0', '#4a5eea', '#00a0e9', '#8957a1', '#fffca4', '#ff6692', '#bdffb8', '#ff959f', '#52f1fa', '#00c0ff', '#f29b76']
                  return colorList[params.dataIndex]
                }
              },
              emphasis: {
                opacity: 1
              }
            },
            data: chartData, //载入数据
            z: 10
          }
        ]
      })
    },
    showEchartsThree() {
      var myChart = echarts.init(this.$refs.chart3)
      let data = [
        {
          name: '年龄层50岁以上',
          value: 16
        },
        {
          name: '年龄层18-28岁',
          value: 18
        },
        {
          name: '年龄层29-40岁',
          value: 29
        },
        {
          name: '年龄层41-50',
          value: 12
        }
      ]
      let color = ['#41A0F9', '#3F82FF', '#32BEF7', '#70ECF8']
      this.$nextTick(()=>{
        myChart.setOption({
        backgroundColor: '#fff',
        animation: true,
        title: {
          text: '总人数  120人',
          x: 'center',
          y: '5%',
          textStyle: {
            color: '#333',
            fontSize: 20,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#666',
            fontSize: 20,
            fontWeight: 'normal',
            align: 'center'
          }
        },
        legend: {
          textStyle: {
            color: '#999',
            fontSize: 14
          },
          itemHeight: 13,
          itemWidth: 13,
          icon: 'rect',
          bottom: '0',
          padding: [30, 5],
          itemGap: 40,
          data: ['年龄层50岁以上', '年龄层18-28岁', '年龄层29-40岁', '年龄层41-50']
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['25%', '50%'],
            color: color,
            startAngle: 150,
            labelLine: {
              normal: {
                length: 25,
                length2: 60,
                lineStyle: {
                  color: '#ECECED'
                }
              }
            },
            label: {
              normal: {
                formatter: '{per|{d}%}\n\n{b|{b}}  ',
                padding: [0, -70, 0, -50],
                rich: {
                  b: {
                    color: '#999',
                    fontSize: 14
                  },
                  per: {
                    color: '#333',
                    fontSize: 16
                  }
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 20
                }
              }
            },
            data: data
          }
        ]
      })
      })
    },
    showEchartsFour() {
      var myChart = echarts.init(this.$refs.chart4)
      var guanwang = [
        {
          name: '北京市朝阳区酒仙桥北路7号电通时代广场2号楼B区创业黑马',
          value: [116.506356, 39.997661]
        },
        {
          name: '佛山市南海区万达广场A座2402室',
          value: [113.165143, 23.069913]
        },
        {
          name: '中山市长江路33号汉宏盈基大厦7楼703',
          value: [113.430002, 22.518705]
        },
        {
          name: '江门市蓬江区东华一路19号 1201 室自编 07、08  单元',
          value: [113.108502, 22.595898]
        },
        {
          name: '江苏省南京市雨花台区华为路楚翘城3号商务楼102室黑马企服',
          value: [118.771773, 31.976485]
        },
        {
          name: '江苏省扬州市星耀天地商务中心2幢1504室',
          value: [119.388376, 32.392914]
        },
        {
          name: '浙江省杭州市西湖区紫霞街176号2号楼1205',
          value: [120.066247, 30.295328]
        },
        {
          name: '江苏省无锡市滨湖区金融二街8号楼交通银行大厦1607室',
          value: [120.313082, 31.493457]
        },
        {
          name: '安徽省合肥市滨湖新区未来塔A座3111室',
          value: [117.308004, 31.704515]
        },
        {
          name: '苏州市苏站路1398号苏州港龙国际 A座 4楼 A4028 室',
          value: [120.619505, 31.339455]
        },
        {
          name: '宁波市江北区大庆北路545号5号楼1楼',
          value: [121.590734, 29.904062]
        },
        {
          name: '山东省青岛市崂山区科苑伟一路一号青岛国际创新园B座1404',
          value: [120.490999, 36.152778]
        },
        {
          name: '绵阳市涪陵区青义镇科大路405号科大广场创业黑马加速基地2楼',
          value: [104.702708, 31.53675]
        },
        {
          name: '陕西省西安市雁塔区高新路高新水晶城B座',
          value: [108.907324, 34.229512]
        },
        {
          name: '四川省成都市武侯区新世纪环球购物中心E1栋1-2-1605',
          value: [104.07163, 30.5733]
        },
        {
          name: '昆明市盘龙区金辰街道北京路延长线1079号欣都龙城1栋商务楼2601',
          value: [102.73937, 25.086383]
        },
        {
          name: '长沙市开福区万达广场A座26005',
          value: [112.977159, 28.205098]
        },
        {
          name: '贵州省贵阳市南明区龙洞堡双龙数据工场B座602',
          value: [106.775672, 26.560229]
        },
        {
          name: '重庆市渝北区冉家坝大成仓国际1栋1102',
          value: [106.496436, 29.603243]
        },
        {
          name: '湖北省武汉市武昌区和平大道750号绿地蓝海B座906室',
          value: [114.330113, 30.588589]
        },
        {
          name: '南昌市红谷滩新区红谷中大道1619号国际金融大厦A栋401',
          value: [115.873468, 28.696643]
        },
        {
          name: '福建省福州市台江区富力中心A座614',
          value: [119.286746, 26.069572]
        },
        {
          name: '厦门市湖里区高林中路469号712单元新景地大厦',
          value: [118.188987, 24.512615]
        },
        {
          name: '济南市高新区汉峪金谷A2-4-1606',
          value: [117.151801, 36.665568]
        },
        {
          name: '大连沙河口区环球金融中心I 16层',
          value: [121.593696, 38.896713]
        },
        {
          name: '山东省潍坊市奎文区民生街四平路恒易宝莲B座1106',
          value: [119.122215, 36.707463]
        }
      ]

      myChart.setOption({
        geo: {
          map: 'china',
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              show: false
            }
          }
        },
        series: [
          {
            //  name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [{ name: '北京', value: [116.4551, 40.2539] }],
            symbolSize: 8,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#E01F21',
                shadowBlur: 10,
                shadowColor: '#E01F21'
              }
            },
            zlevel: 1
          },

          {
            type: 'map',
            map: 'china',
            aspectScale: 0.75,
            //zoom:1.1,

            itemStyle: {
              normal: {
                areaColor: '#B3D8EF',
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#B3D8EF'
              }
            },
            emphasis: {
              label: {
                show: false,
                color: 'transparent'
              }
            },
            data: []
          },
          {
            name: '分公司',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: guanwang,
            symbol:
              'image://',
            symbolSize: [16, 8],
            symbolKeepAspect: false,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  // console.log(params);
                  return params.name
                },
                position: 'right',
                color: 'transparent',
                fontSize: '8'
              }
            },
            emphasis: {
              // show: false,
              label: {
                show: true,
                color: '#E01F21'
              }
            },
            itemStyle: {
              normal: {
                color: '#ea6347',
                borderWidth: 2,
                borderColor: '#f4b391'
              }
            }
          }
        ]
      })
    }
  },
  watch: {},
  computed: {}
}
</script>

<style lang="scss" scoped>
.container-echarts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .box {
    width: 600px;
    height: 400px;
    // background-color: #3498db; /* 设置小盒子的背景色，可根据需要修改 */
    margin-bottom: 20px; /* 可根据需要调整小盒子之间的间距 */
    border: 1px solid #ddd;
  }
}
</style>
